<!--  -->
<template>
    <div class='main'>
        <!-- 这里放测试元件 -->
        <!-- <top_option content='未审核' :number='3' :isChoosed='true'></top_option> -->
        <!-- <proveOption content="测试" tip="测试" index="1"
         :selected='true' :chooseDelete="true"></proveOption> -->
         <!-- <list :chooseDelete="true"></list> -->
         <div id="loupanAlphaFilter">
         </div>
         <div class="checkitem-body">
           <div class="checkitem-main">
            <div class="show">
              <div class="title">条例一(三)2.2</div>
              <div class="detail">积极参加或组织其它非竞赛活动</div>
            </div>
            <div class="bottom">
              <div class="button">确定</div>
            </div>
           </div>
         </div>
    </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import topOption from './filePage/components/topOption.vue'
import proveOption from './filePage/components/proveOption'
import list from './filePage/UnCheckList'
import list2 from './filePage/UnPassList'
import exit from '../../assets/img/icon/homepage_btn_close@2x.png'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    // eslint-disable-next-line vue/no-unused-components
    top_option: topOption,
    // eslint-disable-next-line vue/no-unused-components
    proveOption,
    // eslint-disable-next-line vue/no-unused-components
    list,
    // eslint-disable-next-line vue/no-unused-components
    list2
  },
  data () {
    // 这里存放数据
    return {
      exit
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
    .main {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }
    #loupanAlphaFilter {
    position: absolute;
    padding: 0px;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 112%;
    // -moz-opacity:0.7;
    opacity: 0.45;
    // filter: alpha(opacity=40);
    background-color: #000000;
    // display:none;
    z-index: 100;
  }
  .checkitem-body {
    position: absolute;
    z-index: 110;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(38,38,38,0.45);
    display: flex;
    justify-content: center;
    align-items: center;
    .checkitem-main {
      width: px2rem(332);
      height: px2rem(149);
      background-color: #fff;
      border-radius: px2rem(31);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      .show {
        height: px2rem(59);
        width: px2rem(270);
        margin-top: px2rem(18);
        font-family:PingFang SC;
        .title {
          height: px2rem(25);
          width: 100%;
          margin-bottom: px2rem(9);
          font-size:px2rem(18);
          font-weight:bold;
          line-height:px2rem(25);
          color:rgba(38,38,38,1);
        }
        .detail {
            width:100%;
            height:px2rem(25);
            font-size:px2rem(18);
            font-family:PingFang SC;
            font-weight:400;
            line-height:px2rem(25);
            color:rgba(130,130,130,1);
            overflow: auto;
            white-space: nowrap;
        }
      }
      .bottom {
        width: px2rem(270);
        height: px2rem(44);
        margin-bottom: px2rem(12);
        display: flex;
        flex-direction: row-reverse;
        .button {
          height: px2rem(44);
          width: px2rem(80);
          border-radius: px2rem(22);
          font-size:px2rem(18);
          font-family:PingFang SC;
          font-weight:500;
          line-height:px2rem(44);
          text-align: center;
          color:rgba(255,255,255,1);
          background: -webkit-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* Firefox 3.6 - 15 */
          background: linear-gradient(to right,$gradients-color-lightblue, $ui-color-assist-purple); /* 标准的语法 */
        }
      }
    }
  }

</style>
